<template>
  <div class="search">
    <div class="left_input" v-for="(item,index) in search" :key="index">
      <img :src="item.url" class="left_input_img" @click="search_but">
      <input type="text" :placeholder="item.value" class="left_input_input">
      <button class="left_search" @click="search_but">{{item.text}}</button>
    </div>
  </div>

</template>

<script>
//  import Swiper from 'swiper';
export default {
  name: 'Header',
  data:function(){
    return{
      search:[
        {
          url:require('../assets/search.png'),
          value:'请输入疾病名称',
          text:'搜索'
        }
      ]
    }
  },
  methods:{
    search_but:function(){
       alert("搜索按钮")
    }
   
  }
}

</script>
<style scoped>
.search{width: 267px;}
.left_input{display:flex;justify-content:space-between;border:3px #A40100 solid;box-sizing: border-box;;width:267px;align-items: center;
            border-radius:23.5px ;color:#666666;height: 47px;box-sizing: border-box;position: relative;}
.left_input_img{width:18px;height: 18px;margin-left:20px;cursor: pointer;}
.left_input_input{width:125px;border:none;background-color:transparent;outline: none;font-size: 17px;margin-right:95px;}
.left_search{width:91px;background-color:#9E290B;color:white;font-size:18px;text-align: center;padding:10px 0px;border-radius:23.5px;
            border:none;outline: none;cursor:pointer;position: absolute;right:-2px;}

</style>
